<template>
    <div class="container-projectDetail">
        <!-- 头部 -->
        <van-nav-bar 
        :title='EngineerObject.realEstateName' 
        left-text="返回" 
        left-arrow
        @click-left="onClickLeft">
            <template #right>
                <div @click="toUser" class="nav-img"><img src="../assets/user.png" ></div>
            </template>
        </van-nav-bar>
        <!-- 轮播 -->
        <van-swipe @change="onChange" class="room-swipe"  indicator-color="red">
            <van-swipe-item v-for="item in EngineerbannerList" :key="item">
                <img :src="item"  preview="1" alt="" preview-text="项目详情">
            </van-swipe-item>
            <!-- 自定义指示器 -->
            <template #indicator>
                <div class="custom-indicator">{{ current + 1 }}/{{EngineerbannerList.length}}</div>
            </template>
        </van-swipe>
        <!-- 主要内容 -->
        <div class="content">
            <!-- 店铺信息 -->
            <div class="message m1">
                <!-- 价钱 -->
                <div class="message-hd">
                    <div class="room-prices">
                        <span>{{EngineerObject.realEstateMinPrice}}</span>元/月起
                    </div>
                    <div class="room-goods">
                        <div class="view-num">{{EngineerObject.realEstateViewQuantity}}人浏览</div>
                        <div class="share" @click="toResigion">
                            <img src="../assets/share.png" alt="">
                            <span>客户推荐</span>
                        </div>
                    </div>
                </div>
                <!-- 独家 -->
                <div class="room-sole">
                    <div class="pic" v-if="EngineerObject.realEstateExclusiveAgent==1">
                        <img src="../assets/sole.png" alt="">
                    </div>
                    <div class="text">客户推荐（商机推荐）：仅需推荐一次，报备全部独家项目</div>
                </div>
                <!-- 地址 -->
                <div class="room-address">{{EngineerObject.realEstateName}}</div>
                <!-- 物业 -->
                <!-- <div class="room-format">
                    <div class="format-item" v-for="item in formatList" :key="item">{{item}}</div>
                </div> -->
            </div>
            <div class="message m2">
                <!-- 物业类型 -->
                <div class="wuye-type">
                    <span class="num" v-if="EngineerObject.realEstateMass">
                        {{EngineerObject.realEstateMass}}㎡
                    </span>
                    <span class="num" v-else>暂无</span>
                    <span>项目体量</span>
                </div>
                <!-- 起租期 -->
                <div class="room-month">
                    <span class="num" v-if="EngineerObject.realEstateType">
                        {{EngineerObject.realEstateType}}
                    </span>
                    <span class="num" v-else>暂无</span>
                    <span>项目类型</span>
                </div>
                <!-- 免租期 -->
                <div class="free-month">
                    <span class="num" v-if="EngineerObject.realEstateMinRent">
                        {{EngineerObject.realEstateMinRent}}个月
                    </span>
                    <span class="num" v-else>暂无</span>
                    <span>最短起租</span>
                </div>
            </div>
            <div class="message m3">
                <div class="message-text">
                    <span class="text">楼盘</span>
                    <span v-if="EngineerObject.realEstatePropertyManagementCompany">
                        {{EngineerObject.realEstatePropertyManagementCompany}}
                    </span>
                    <span v-else>暂无</span>
                </div>
                <div class="message-text">
                    <span class="text">楼栋总数</span>
                    <span v-if="EngineerObject.realEstateBuildingCount">
                        {{EngineerObject.realEstateBuildingCount}}
                    </span>
                    <span v-else>暂无</span>
                </div>
                <div class="message-text">
                    <span class="text">商铺总数</span>
                    <span v-if="EngineerObject.toBeRanted">
                        {{EngineerObject.toBeRanted}}
                    </span>
                    <span v-else>暂无</span>
                </div>
            </div>
            <div class="album-title" @click="toAlbum(EngineerObject)">
                <div class="">查看{{EngineerObject.realEstateName}}全部项目图册</div>
            </div>
            <!-- 项目介绍 -->
            <div class="floor f1">
                <div class="hd">
                    <div class="floor-title">项目介绍</div>
                </div>
                <div class="bd">
                    <div class="project-message" v-html="EngineerObject.realEstateDescription"></div>
                </div>
            </div>
            <!-- 项目视屏 -->
             <div class="floor f2">
                <div class="hd">
                    <div class="floor-title">项目视频</div>
                </div>
                <div class="bd">
                    <video-player  class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="true"
                        :options="playerOptions">
                    </video-player>
                </div>
            </div>
            <!-- 正在出租店铺 -->
            <div class="floor f4" v-if="saleingroomList.length>0">
                <div class="hd">
                    <div class="floor-title">
                        <span class="left">{{EngineerObject.realEstateName}}正在出租</span>
                        <span class="right" @click="moreProjectRoom(EngineerObject.realEstateName)">更多店铺</span>
                    </div>
                    <div class="bd">
                        <div class="room-list">
                            <div class="room-item" @click="to_detail(item1.id)" v-for="item1 in saleingroomList" :key="item1.id">
                                <div class="room-pic">
                                    <img :src="item1.roomPicture" alt="">
                                    <div class="sale-img" v-if="item1.realEstateExclusiveAgent==1">
                                        独家项目
                                    </div>
                                    <div class="sale-text" v-if="item1.viewingBonus>=1&&item1.viewingBonus!=null">带看奖励</div>
                                </div>
                                <div class="room-text">
                                    <div class="room-name">
                                        <span>{{item1.roomName}}</span>
                                        <!-- <span v-if="item1.realEstateExclusiveAgent==1">
                                            <img src="../assets/sole.png" alt="">
                                        </span> -->
                                    </div>
                                    <div class="room-address">
                                        <span>{{item1.realEstateModule}}</span>
                                        <span>|</span>
                                        <span>{{item1.realEstateCity}}-{{item1.realEstateDistrict}}-{{item1.realEstateName}}</span>
                                    </div>
                                    <div class="room-format">
                                        <div class="format-item" v-for="item2 in item1.roomPropertyConditionsFormat" :key="item2">
                                            {{item2}}
                                        </div>
                                    </div>
                                    <div class="room-num">
                                        <div class="num-area">{{item1.realEstateType}}</div>
                                        <div class="num-prices">{{item1.monthlyRent}}元/月</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="floor f3">
                <div class="hd">
                    <div class="floor-title">位置及周边</div>
                </div>
                <div class="bd">
                    <div class="projectdetail-address">
                        地址：{{EngineerObject.realEstateLocation}}
                    </div>
                    <!-- map地图  &&&& 生活周边配套-->
                    <baidu-map class="bm-view" 
                        @click="to_mapDetail"
                        :center="{lng: Engineerlongitude, lat: Engineerlatitude}" 
                        :zoom="16"
                        :scroll-wheel-zoom="true" 
                        :ak="YOUR_APP_KEY">
                        <!-- 中心地标 -->
                        <!-- 中心地标 -->
                         <bm-marker :icon="{url:'/static/address-logo2.png', size: {width: 22, height: 28}}" :position="{lng: Engineerlongitude, lat: Engineerlatitude}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                            <bm-label :content="EngineerObject.realEstateName" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
                        </bm-marker>
                    </baidu-map>
                </div>
            </div>
        </div>
        <foot-message></foot-message>
    </div>
</template>
<script>
import{selectprojectDetail,recommprojectList} from "@/api/projectDetail"
import {BmMarker,BmInfoWindow,BmLabel} from 'vue-baidu-map';
import FootMessage from '@/components/foot-message/index.vue'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { mapActions, mapState } from 'vuex';
export default {
    components:{
        BmMarker,
        BaiduMap,
        BmInfoWindow,
        BmLabel,
        FootMessage
    },
    data(){
        return{
            // 项目数组
            EngineerbannerList:[],
            // 轮播图的自定义指示器
            current:0,
            // 项目详情
            EngineerObject:{},
            // 项目经纬度
            Engineerlongitude:"",
            Engineerlatitude:"",
            // 百度地图key
            YOUR_APP_KEY:'DHHgQLPu0a2e4rY7ORxUiPpChQ9RLsdy',
            // 项目视频参数
            playerOptions:{},
            // 正在出租
            saleingroomList:[]
        }
    },
    mounted(){
        this.loadData()
    },
    created(){
        // this.$router.go(0)
        this.loadData()
    },
    mounted(){

    },
    computed:{
        ...mapState(["turnOpen"])
    },
    methods:{
        ...mapActions(["saveRouter"]),
        loadData(){
            // 项目详情
            selectprojectDetail('/real/estate/get/'+this.$route.query.EngineerId).then(res=>{
                console.log(res)
                this.EngineerObject=res
                 // 改造数组
                var bannerList=[]
                var bannerListfiltter=[]
                let bannerList1=res.realEstateBannerImages.replace('[', '').replace(']', '').split(",");
                let bannerList2=res.realEstateEffectImages.replace('[', '').replace(']', '').split(",");
                let bannerList3=res.realEstateFloorPlanDuexImages.replace('[', '').replace(']', '').split(",");
                bannerList = bannerList.concat(bannerList1,bannerList2,bannerList3)
                bannerListfiltter=bannerList.filter(item=>item!="")
                console.log(bannerListfiltter)
                res.EngineerbannerList = bannerListfiltter;
                this.EngineerbannerList=bannerListfiltter
                // // 店铺经纬度赋值
                this.Engineerlongitude=Number(res.realEstateLocationLng)
                this.Engineerlatitude=Number(res.realEstateLocationLat)
                // 地图转换
                this.bd_decrypt(Number(res.realEstateLocationLng),Number(res.realEstateLocationLat))
                // 视频
                var playerOptions={
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources : [ {
                        type : "",
                        src : res.realEstatePromotionalVideo///url地址
                    } ],
                    poster: res.realEstateCoverImage, //你的封面地址
                    // width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: false,
                    fullscreenToggle: true  //全屏按钮
                    }
                }
                this.playerOptions=playerOptions
                // 项目的正在出售店铺
                recommprojectList('/real/estate/room/limit/'+this.$route.query.EngineerId + '?count='+4).then(res=>{
                    console.log("正在出售",res)
                    // this.recommroomList=res
                    this.saleingroomList=res
                })
                // 分享
                var dataForWeixin={
                    title:res.realEstateName+"【躺猪网】超值好铺抢租中",
                    imgUrl:res.realEstateCoverImage,
                    link:window.location.href,
                    desc:"好铺好服务 找铺上躺猪"
                }
                this.$share.getJSSDK(dataForWeixin)
            })
        },
        // 腾讯转百度地图
        bd_decrypt(lng,lat) {
            if (lng == null || lng == '' || lat == null || lat == '')
            return [lng, lat];

            var x_pi = 3.14159265358979324;
            var x = parseFloat(lng);
            var y = parseFloat(lat);
            var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
            var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
            var lng = (z * Math.cos(theta) + 0.0065).toFixed(5);
            var lat = (z * Math.sin(theta) + 0.006).toFixed(5);
            this.Engineerlongitude=lng
            this.Engineerlatitude=lat 
        },
        // 去用户信息
		toUser(){
			this.$router.push({path:"/user"})
		},
        // 去注册
        toResigion(){
            this.$router.push({path:"/resigion"})
        },
        // 去店铺详情
        to_detail(id){
             this.$router.push({path:"/roomDetail",query:{roomId:id}})
        },
        // 查看更多该项目的店铺
        moreProjectRoom(projectname){
            this.$router.push({name:'room',params: {Words:projectname}})
        },
        // 返回上一页面
        onClickLeft(){
            if(this.turnOpen==0){
                this.$router.go(-1);
            }else{
                this.$router.push({path:'/home'})
                this.saveRouter(0)
            }
        },
        // 轮播图切换
        onChange(index){
            // console.log(index)
            this.current=index
        },
        // 去地图详情
        to_mapDetail(){
            this.$router.push({path:"/detail",query:{lng:this.Engineerlongitude,lat:this.Engineerlatitude}})
        },
        // 去图册详情
        toAlbum(EngineerObject){
            console.log(EngineerObject)
            this.$router.push({path:"/projectalbum",query:{object:JSON.stringify(EngineerObject)}})
        }
    }
}
</script>
<style lang="less" scoped>
/// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
.nav-img{
	img{
		width: 0.39rem;
		height: 0.39rem;
	}
}
// 轮播样式
.van-swipe{
    height: 5.65rem;
    img{
        width: 100%;
        height: 100%;
    }
}
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 0.28rem;
    background: rgba(0, 0, 0, 0.3);
}
// 主要内容
.content{
    padding: 0 0.35rem;
    .album-title{
        margin: 0.5rem 0;
        font-size: 0.32rem;
        display: flex;
        justify-content: center;
        height: 0.6rem;
        background-color: #F9F9F9;
        color: #FF9800;
        line-height: 0.6rem;
    }
}
// 店铺信息
.message{
    border-bottom: 1px solid #eee;
    padding-bottom: 0.2rem;
    padding-left: 0.15rem;
}
.message-hd{
    display: flex;
    margin-top: 0.2rem;
    justify-content: space-between;
    align-items: center;
    font-size: 0.28rem;
    color: #666666;
    .room-prices{
        span{
            font-size: 0.38rem;
            font-weight: 600;
            color: #EA4800;
        }
    }
    .room-goods{
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 0.24rem;
        color: #999;
        img{
            width: 0.35rem;
            height: 0.35rem;
            margin-right: 0.1rem;
        }
        div{
            margin-right: 0.2rem;
            display: flex;
            align-items: center;
        }
    }
}
.room-sole{
    font-size: 0.24rem;
    img{
        width: 1.33rem;
        height: 0.33rem;
    }
    div{
        margin: 0.1rem 0;
    }
}
.room-address{
    font-size: 0.36rem;
    font-weight: 600;
    color: #222;
}
.message.m2{
    padding-bottom: 0.2rem;
    padding-top: 0.2rem;
    display: flex;
    font-size: 0.24rem;
    color: #999;
    span{
        margin-top: 3px;
    }
    div{
        margin-right: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .num{
            font-weight: 600;
            font-size: 0.28rem;
            color: #222;
        }
    }
}
.message.m3{
    padding-top: 0.2rem;
    .message-text{
        display: flex;
        font-size: 0.24rem;
        margin-top: 0.17rem;
        .text{
            color: #999;
            display: flex;
            width: 1.8rem;
        }
    }

}
// 主要内容
.floor{
    .floor-title{
        font-size: 0.32rem;
        padding: 0.3rem 0;
        font-weight: 600;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        .right{
            color: #f08200;
        }
    }
}
.floor.f3{
    padding-bottom: 1.5rem;
}
/deep/.project-message{
    font-size: 0.26rem;
    p{
        margin: 0;
    }
    p:nth-child(1){
        margin-top: 0.2rem;
    }
}
// 地图组件样式
.projectdetail-address{
    font-size: 0.24rem;
    padding: 0.25rem 0;
    color: #777;
}
.bm-view{
    height:4.5rem ;
}
.address-name{
    font-size: 0.14rem;
}
/deep/.BMapLabel{
    left: 50%!important;
    top: 50%!important;
    transform: translate(-40%,-150%);
    font-size: 0.24rem!important;
    // border: 1px solid #FFA740!important;
}
/deep/.BMap_Marker::before{
    content: " ";
    position: absolute;
    bottom:6px;
    border-top: .1rem solid red;
    border-left: .1rem solid transparent;
    border-right: .1rem solid transparent;
    width: 0;
    height: 0;
    left: 50%;
    // transform: translate(-50%,0);
    transform: translateX(-50%);
    -webkit-transform: translateX(50%);
}
/deep/.BMap_Marker.BMap_noprint::before{
    display: none;
}
.room-list{
	margin: 0.45rem 0;
	height: 100%;
}
.room-item{
	display: flex;
	margin-top: 0.25rem;
	.room-pic{
		width: 1.94rem;
    	height: 1.5rem;
		position: relative;
		img{
			width: 100%;
			height: 100%;
		}
		.sale-img{
            position: absolute;
            width: 0.9rem;
            height: 0.3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            left: 0;
            bottom: 0;
            font-size: 0.18rem;
            color: #fff;
            background-color: #EA4800;
            opacity: 0.9;
        }
        .sale-text{
            position: absolute;
            width: 0.9rem;
            height: 0.3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            right: 0;
            bottom: 0;
            font-size: 0.18rem;
            color: #fff;
            background-color: #ea0000;
            opacity: 0.9;
        }
	}
	.room-text{
		flex: 1;
		font-size: 0.2rem;
		padding-left: 0.3rem;
		.room-name{
			font-weight: 600;
			font-size: 0.32rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 4rem;
		}
		.room-address{
			display: flex;
			font-size: 0.22rem;
			align-items: center;
			color: #999;
			margin-top: 0.1rem;
			span{
				position: relative;
				margin-right: 0.1rem;
			}
		}
		.room-num{
			display: flex;
			font-size: 0.2rem;
			align-items: center;
            margin-top: 0.1rem;
			justify-content: space-between;
			.num-prices{
				color: #EA4800;
				font-weight: 600;
				font-size: 0.28rem;
			}
		}
	}
}
.room-num{
    .num-area{
        display: flex;
        align-items: center;
    }
}
</style>